<template>
	<div>
		<div class="lxl-filter">
			<el-input v-model="searchval" placeholder="角色名字"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
			<el-button style="float: right;" type="primary" icon="el-icon-plus" @click="add">添加</el-button>
		</div>
		<el-table border :data="tableData.records">
			<!-- <el-table-column label="编号" prop="id"></el-table-column> -->
			<el-table-column label="角色名" prop="name" width="150"></el-table-column>
			<el-table-column label="状态" width="150">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.active">有效</el-tag>
					<el-tag type="danger" v-else>无效</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="关联" width="250">
				<template slot-scope="scope">
					<template v-if="scope.row.active">
						<el-button size="mini" type="primary" plain @click="userlist(scope.row.id)">用户列表</el-button>
						<el-button size="mini" type="primary" plain @click="resourcelist(scope.row.id)">资源列表</el-button>
					</template>	
				</template>
			</el-table-column>
			<el-table-column width="150">
				<template slot-scope="scope">
					<template v-if="scope.row.active">
						<el-button size="mini" @click="update(scope.row.id)">修改</el-button>
						<el-button size="mini" type="danger" @click="del(scope.row.id,0)">删除</el-button>
					</template>
					<el-button v-else size="mini" type="warning" @click="del(scope.row.id,1)">恢复</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
		style="margin-top: 10px;"
		 background
		 :page-count="tableData.pages"
		 :current-page.sync="params.pageNo"
		 @current-change="getTableData"></el-pagination>
		 <el-dialog
		 width="450px"
			:title="dialog.title"
			:visible.sync="dialog.show"
			:close-on-click-modal="false">
			<component 
			v-if="dialog.show" 
			:id="dialog.id"
			:module="dialog.module"
			:is="dialog.component"
			:show.sync="dialog.show"
			@getTableData="getTableData">
			</component>
			<!-- 加sync是能让子组建能修改属性 -->
		</el-dialog>
	</div>
</template>

<script>
import { get,post,request } from '@/plugins/axios'
//import { Loading, Message } from 'element-ui';
//import {  } from 'element-ui';
export default {
	name: 'RoleIndex',
	created() {
		// 尽可能不在此写代码
		this.getTableData()
	},
	data () {
		const module = '/umsRole'
		return {
			tableData: [
				//从后端查询了
				// {id: 1,name: 'zhangsan',age: 20},
				// {id: 1,name: 'zhangsan',age: 20}
			],
			url: {
				list: module + '/list',
				del : module + '/del',
			},
			txt: {
				add: '添加角色',
				update: '修改角色'
			},
			params: { 
				pageNo: 1,
				pageSize: 6,
				value: ''
			},
			searchval: '',
			dialog: {
				title: '',
				show: false,
				id: null,
				module: module,
				component: () => import('./edit')
			}
		}
	},
	methods: {
		// 获取数据
		getTableData () {
			request(this.url.list, 'get', this.params, response => {
					this.tableData = response
				})
			},
			// - 定义在了axios中 可以删除掉
			// 加载组件 
			// const lxlLoading = Loading.service({
			// 	text: '加载中......'
			// })
		// 	lxlaxios.request(
		// 		'/umsUser/list' ,
		// 		{
		// 			method: 'get',
		// 			params: this.params
		// 		}).then(response => {
		// 			if (response.data.code === 200){
		// 				console.log(response.data.content)
		// 				this.tableData = response.data.content;
		// 			} else {
		// 				Message.error(response.data.message)
		// 			}
		// 			//lxlLoading.close()
		// 		}).catch(error => {
		// 			Message.error(error.message)
		// 		}).finally(() => {
		// 			lxlLoading.close()
		// 		})
		// },
		//模糊查询
		search () {
			this.params.value = this.searchval
			this.params.pageNo = 1
			this.getTableData()
		},
		//添加用户
		add () {
			//this.dialog.title = '添加用户'
			this.dialog.title = this.txt.add
			this.dialog.id = null
			this.dialog.show = true
		},
		//修改用户
		update (id) {
			this.dialog.title = this.txt.update
			this.dialog.id = id
			this.dialog.show = true
		},
		//删除用户
		del (id, active) {
			const txt = active ? '确定要将数据恢复吗?' : '确认要删除该数据吗?'
			const title = '提示'
			this.$confirm(txt, title, {
				type: 'warning'
			}).then(() => {
				post(this.url.del,{ id: id,active: active }, response=>{
					this.getTableData()
				})
			}).catch(() => {})
			
		},
		userlist(id){
			this.$router.push({
				path: '/roleUser',
				query: {
					roleId: id
				}
			})
		},
		resourcelist(id){
			this.$router.push({
				path: '/roleResource',
				query: {
					roleId: id
				}
			})
		}
	},
}
</script>

<style>
</style>
